<template>
    <div class="links">
        <div class="title">技术业务范围</div>
        <div class="flexBox">
            <div class="flex1">
                <div>二维三维动画制作</div>
                <div>小程序H5网站开发</div>
                <div>VR、AR、MR</div>
                <div>课件开发</div>
                <div>新技术讲解</div>
            </div>
            <div class="flex1 center">
                <div>材质建模</div>
                <div>游戏应用开发</div>
                <div>虚拟仿真</div>
                <div>技术解答</div>
            </div>
            <div class="flex1 center">
                <div>动画绑定</div>
                <div>系统开发</div>
                <div>特效制作</div>
                <div>技术支持</div>
            </div>
            <div class="flex1 right">
                <div>地产宣传</div>
                <div>APP开发</div>
                <div>插件开发</div>
                <div>新工具讲解</div>
            </div>
        </div>
        <div class="title">联系我们</div>
        <div class="ewm">
            <img :src="require('../../assets/images/eq.png')" />
            <div class="t">微信客服</div>
            <div class="b">XINHUANXIANG</div>
        </div>
        <div class="copyRight">
            京公网安备：11010502040730号&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;京ICP备：20010719号
        </div>
    </div>
</template>
<style lang="less" scoped>
.links {
    .title {
        font-size: 30 / 2px;
        position: relative;
        text-align: center;
        line-height: 70 / 2px;
        &::after {
            content: "";
            position: absolute;
            height: 6 / 2px;
            width: 60 / 2px;
            background: #ffffff50;
            border-radius: 10 / 2px;
            margin-left: -30 / 2px;
            bottom: 0;
            left: 50%;
        }
    }
    .flexBox {
        margin-top: 20 / 2px;
        display: flex;
        padding: 0 50 / 2px;
        opacity: 0.8;
        margin-bottom: 50 / 2px;
        .flex1 {
            flex: 1;
            font-size: 18 / 2px;
            div {
                margin-top: 20 / 2px;
            }
            &.center {
                text-align: center;
            }
            &.right {
                text-align: right;
            }
        }
    }
    .ewm {
        img {
            display: block;
            width: 180 / 2px;
            margin: 30 / 2px auto 20 / 2px;
        }
        text-align: center;
        font-size: 20 / 2px;
        .t {
            color: #ffffff80;
        }
        .b {
            font-size: 24 / 2px;
        }
    }
    .copyRight {
        text-align: center;
        font-size: 20 / 2px;
        color: #ffffff80;
        margin-top: 100/2px;
    }
}
</style>
<script>
export default {
    data () {
        return {
        }
    }
};
</script>